<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>软件园商城</title>
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
  <style type="text/css">
    /* Chart.js */
    @-webkit-keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    @keyframes chartjs-render-animation {
      from {
        opacity: 0.99
      }
      to {
        opacity: 1
      }
    }

    .chartjs-render-monitor {
      -webkit-animation: chartjs-render-animation 0.001s;
      animation: chartjs-render-animation 0.001s;
    }

    /* Custom styles for the form */
    .form-container {
      background-color: #f8f9fa;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .form-container h3 {
      text-align: center;
      color: #007bff;
      margin-bottom: 20px;
    }

    .form-group label {
      font-weight: bold;
      color: #343a40;
    }

    .form-group input,
    .form-group select {
      border: 1px solid #ced4da;
      border-radius: 5px;
      padding: 10px;
      font-size: 16px;
    }

    .form-group input:focus,
    .form-group select:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-group button {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    .form-group button:hover {
      background-color: #0056b3;
    }

    /* Gender selector styles */
    .gender-selector {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
    }

    .gender-selector label {
      display: inline-block;
      padding: 10px 20px;
      margin: 5px;
      background-color: #f0f0f0;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .gender-selector input[type="radio"] {
      display: none;
    }

    .gender-selector input[type="radio"]:checked + label {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</head>

<body>
<!--顶部菜单 -->
<div th:replace="~{topleft::topnav}"></div>
<div class="container-fluid">
  <div class="row">
    <!--左菜单 -->
    <div th:replace="~{topleft::#sidebarMenu(lurl='leftuser')}"></div>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <!-- 返回按钮 -->
      <div class="mb-4">
        <a href="#" class="btn btn-secondary" id="backButton" th:href="@{/getUserList}">
          <i class="fas fa-arrow-left"></i> 返回上一级
        </a>
      </div>

      <div class="card">
        <div class="card-body form-container">
          <h3>添加新用户</h3>
          <form action="#" th:action="@{/addUser}" method="post">
            <div class="form-row">
              <div class="form-group col-md-6">
                <label class="font-weight-bold text-primary"><i class="fas fa-user"></i> 姓名</label>
                <input type="text" class="form-control" name="name" placeholder="请输入姓名" required>
              </div>
              <div class="form-group col-md-6">
                <label class="font-weight-bold text-primary"><i class="fas fa-venus-mars"></i> 性别</label>
                <div class="gender-selector">
                  <input type="radio" id="male" name="sex" value="男">
                  <label for="male">男</label>
                  <input type="radio" id="female" name="sex" value="女">
                  <label for="female">女</label>
                </div>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-md-6">
                <label class="font-weight-bold text-primary"><i class="fas fa-calendar"></i> 年龄</label>
                <input type="number" class="form-control" name="age" placeholder="请输入年龄" required>
              </div>
              <div class="form-group col-md-6">
                <label class="font-weight-bold text-primary"><i class="fas fa-lock"></i> 密码</label>
                <input type="password" class="form-control" name="password" placeholder="请输入密码" required>
              </div>
            </div>

            <div class="form-group text-center">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> 保存用户
              </button>
            </div>
          </form>
        </div>
      </div>
    </main>
  </div>
</div>

<!-- 引入Bootstrap核心JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>
</body>

</html>